From e242c23c10cbfb51bab1a678daef34441f127eda Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 4 May 2024 20:26:49 -0700
Subject: feat(user): pinned category ui

---
 src/routes/user/[user]/+page.svelte | 69 ++++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 5 deletions(-)

(limited to 'src/routes/user/[user]')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 2dd8dc2b..097007f0 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -68,6 +68,11 @@
 	const getBiography = () =>
 		(document.getElementById('biography') as HTMLTextAreaElement).value.slice(0, 3000);
 
+	const refreshPreferences = () =>
+		fetch(root(`/api/preferences?id=${userData?.id}`))
+			.then((rawPreferences) => rawPreferences.json())
+			.then((JSONpreferences) => (preferences = JSONpreferences));
+
 	// 8.5827814569536423841e0
 </script>
 
@@ -239,6 +244,49 @@
 
 			<p />
 
+			Pinned Categories
+
+			<div class="pinned-categories">
+				{#each preferences.pinned_badge_wall_categories.split(',') as category}
+					<span class="card card-small pinned-category">
+						<span class="pinned-category-name">
+							{category}
+						</span>
+						<button
+							on:click={() => {
+								if (userData)
+									fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+										method: 'PUT'
+									}).then(refreshPreferences);
+							}}>Remove</button
+						>
+					</span>
+				{/each}
+
+				<span class="card card-small pinned-category">
+					<span class="pinned-category-name">
+						<input type="text" id="category" placeholder="Category" style="width: 10em;" />
+					</span>
+
+					<button
+						class="button-lined"
+						on:click={() => {
+							if (userData) {
+								const category = document.getElementById('category').value;
+
+								fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+									method: 'PUT'
+								}).then(refreshPreferences);
+
+								document.getElementById('category').value = '';
+							}
+						}}>Add</button
+					>
+				</span>
+			</div>
+
+			<p />
+
 			Biography
 
 			<button
@@ -247,11 +295,7 @@
 						fetch(root(`/api/preferences?id=${userData.id}&biography`), {
 							method: 'PUT',
 							body: getBiography()
-						}).then(() =>
-							fetch(root(`/api/preferences?id=${userData?.id}`))
-								.then((rawPreferences) => rawPreferences.json())
-								.then((JSONpreferences) => (preferences = JSONpreferences))
-						);
+						}).then(refreshPreferences);
 				}}>Save</button
 			>
 			<textarea
@@ -355,4 +399,19 @@
 	.user-grid-rest {
 		flex: 1;
 	}
+
+	.pinned-categories {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.pinned-category {
+		display: flex;
+		align-items: center;
+	}
+
+	.pinned-category-name {
+		margin-right: 0.5em;
+	}
 </style>
-- 
cgit v1.2.3